@charset "UTF-8";
:root{
    --cor0: #d8d6d6;
    --cor1: #c2bcbc;
    --cor2: #aaaaaa;
}
body {
    background-color: #aaaaaa;
    padding: 20px -10px 20px 10px;
    margin: 20px 20px 10px 20px;
}
header { 
    border-bottom: 0.1px solid #000;
    box-shadow: 4px 4px 8px #000;
    height: 160px;
    background-image: linear-gradient(to bottom,#ddd,#888,#444);
    padding: 20px -10px 20px 10px;
    margin: -20px 20px 10px 20px;
}
header h1 { /* HTML-CSS - Módulo 03.html */
    font-size: 42px; color: #F2F2F2;		 
    font-family: 'Finger Paint', cursive; 
    color: #fff;
    padding-top: 45px; 
    margin: 30px 20px 10px 10px; 
    text-align: left; 
    text-shadow: 6px 6px 10px rgba(0,0,0,.6);
}
section ul li h2 {
    margin-top: -10px;
}
h1 {font-size: 42px; text-align: center;}
h2 {font-size: 36px;}
h3 {font-size: 24px; color: #fff;}
p {font-size: 20px;}
a { color: #000; text-decoration: none; padding: 10px;}
a:hover { 
    color: #fff; 
    text-decoration: underline;
    text-shadow: 0px 0px 20px #000;
}
.siteOnline{
    text-decoration: none;
}
.siteOnline :hover{
    text-decoration: none; 
    transform: scale(1.2);
    transition: 1s;
}
.item {
    border: 0.1px solid #000; 
    box-shadow: 4px 4px 8px #000;
    padding: 20px;
    margin: 20px 20px 20px -20px;
    background-image: linear-gradient(to bottom,#ddd,#888,#444);
}
.solo {
    display: block; 
    margin: auto;
}
.topico {
    columns: 2; color: #fff;    
}
.topico > li {
    font-size: 22px; 
    color: #fff;
    padding: 2px 10px;
    list-style: none;
}
.topico > li:hover {
    transform: scale(1.2); 
    transition-duration: 0.8s;
    color: #000;
    font-weight: bolder;
    text-shadow: 0px 0px 10px #ffffff;
}
.topico > p {
    font-size: 28px; 
    color: #fff;
    padding: 2px;
    text-align: center;
}
video {
    width: 50%;
    padding: 10px;
}
.video{
    text-align: center; 
    padding: 20px;
}
img {margin: 20px; width: 40%;}
img:hover {
    transform: scale(1.2); 
    transition-duration: 0.8s;
}
footer { border-top: 2px solid #fff; }
footer > p {text-align: center;}
#logo-curso-em-video{
    position: absolute;
    width: 18%; height: 15%;
    top: 5px; left: 50px;
}
.menu ul li {
    background-color: #aaaaaa; 
    color: #fff;
    float: left;    /* Dispões os ítens horizontalmente */
    width: 180px;
    height: 40px;
    text-align: center;
    line-height: 40px;  /* centraliza verticalmente "line-height = height = 40px" */ 
    font-size: 25px;
    list-style: none;
}
.menu ul li:hover {background-color: #4f5153;}
.menu{ 
    display: block; opacity: .8;
}         
.menu ul {
    padding: 0px;    /* tira o avanço e alinha */
    position: absolute; top: -2px; right: 44px; /* posição absoluta no site */
}
.menu ul ul {
    display: none;
    position: relative; left: 0px;
}
.menu ul li:hover > ul{display: block; float: left;}
.menu ul ul ul {margin-left: 200px; top: -40px;}
.botao {
    border: 2px solid #000;
    padding: 10px 100px 10px 100px;
    background-color: #dddddd; 
}